import React from 'react';
import PropTypes from 'prop-types';
import routes from './routes';
import {Button, Form, Divider, Row, Col, Card, Spin, message as msg} from 'antd';
import {DATE_FORMAT, FORM_OPTIONS} from '../constants';
import {testDriveStatus, gender, ReturnStatus, customerOccupationType, evaluateResult} from '../Enum';
import {conventEnumValueToString, formatDateTime} from '../utils';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import Return from '../common/Return';
import {hasPermissions} from './utils';
import {PERMISSION} from './constants';
import {injectIntl} from './intl';
import FileUpload from './FileUpload';
import {getDetail} from './api';
const {Description} = DescriptionList;
const EMPTY_ARRAY = [];
export class UpdatePanel extends React.PureComponent {
    state = {
        loading: false,
        hasOperat: false,
        validate: false,
        data: {},
    };

    componentDidMount() {
        const id = this.props.id;
        this.setState({loading: true});
        getDetail(id)
            .then(res => {
                if(res.ok)
                    this.setState({
                        loading: false,
                        data: res.data
                    });
                this.setState({
                    loading: false
                });
            });
    }

    componentWillUnmount() {
        this.isunmount = true;
    }

    handleFilterChange = (value, name) => {
        if(name === 'submitEndDay' && value === 31)
            msg.warn(this.props.intl.formatMessage({
                id: 'message.submitEndDay',
                defaultMessage: '这是月底最后一天'
            }));
        if(name === 'submitNoticeEndDay' && value === 31)
            msg.warn(this.props.intl.formatMessage({
                id: 'message.submitEndDay',
                defaultMessage: '这是月底最后一天'
            }));
        if(name === 'expirationDate' && value === null)
            msg.warn(this.props.intl.formatMessage({
                id: 'message.expirationDate',
                defaultMessage: '此设置永远有效'
            }));
        const data = Object.assign({}, this.state.data, {
            [name]: value
        });
        this.setState({
            data,
            hasOperat: true
        });
    }

    // eslint-disable-next-line react/sort-comp
    onClickReturnBtn = () => {
        this.props.onCancel();
    }

    onSubmit = () => {
        this.setState({
            loading: true,
        });
        this.props.onSubmit(this.state.data).then(() => {
            if(this.success)
                this.props.successReturn();
            if(!this.isunmount)
                this.setState({loading: false});
        });
    }
    removeFilePath = file => {
        const data = this.state.data;
        const index = data.attachments.findIndex(item => item.fileId === file.fileId);
        if(index === -1)
            return null;
        const attachments = data.attachments || [];
        attachments.splice(index, 1);
        this.setState({
            data: {
                ...data,
                attachments
            },
            hasOperat: true,
        });
    }
    onChangeUpload = value => {
        const data = this.state.data;
        const attachments = data.attachments || [];
        attachments.push(value[0]);
        this.setState({
            data: {
                ...data,
                attachments
            },
            hasOperat: true,
        });
    }

    render() {
        const {data} = this.state;
        const {formatMessage} = this.props.intl;
        const {pagePermission} = this.props;
        const submitable = hasPermissions(PERMISSION.add, pagePermission);
        return (
            <div className="form-standard">
                <Spin spinning={this.state.loading}>
                    <Form>
                        <Card loading={this.state.loading}>
                            <DescriptionList size="large" title={<Row><Col span={12}>{formatMessage({
                                id: 'updatePanel.customer.title',
                                defaultMessage: '客户信息'
                            })}</Col>
                            </Row>}>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.code',
                                    defaultMessage: '试乘试驾编号'
                                })}>{data.code}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.brandName',
                                    defaultMessage: '品牌名称'
                                })}>{data.brandName}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.dealerCode',
                                    defaultMessage: '总代编号'
                                })}>{data.dealerCode}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.dealerName',
                                    defaultMessage: '总代名称'
                                })}>{data.dealerName}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.subDealerCode',
                                    defaultMessage: '二级服务站编号'
                                })}>{data.subDealerCode}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.subDealerName',
                                    defaultMessage: '二级服务站名称'
                                })}>{data.subDealerName}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.country',
                                    defaultMessage: '国家'
                                })}>{data.country}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.testDriveYear',
                                    defaultMessage: '试乘试驾年份'
                                })}>{data.testDriveYear}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.testDriveMonth',
                                    defaultMessage: '试乘试驾月份'
                                })}>{data.testDriveMonth}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.customerCode',
                                    defaultMessage: '客户编号'
                                })}>{data.customerCode}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.customerName',
                                    defaultMessage: '客户姓名'
                                })}>{data.customerName}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.cellPhoneNumber',
                                    defaultMessage: '客户电话'
                                })}>{data.cellPhoneNumber}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.gender',
                                    defaultMessage: '性别'
                                })}>{conventEnumValueToString(gender, data.gender)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.birthday',
                                    defaultMessage: '生日'
                                })}>{formatDateTime(data.birthday, DATE_FORMAT)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.purchaseOrNot',
                                    defaultMessage: '是否购车'
                                })}>{data.purchaseOrNot ? formatMessage({
                                        id: 'updatePanel.text.yes',
                                        defaultMessage: '是'
                                    }) : formatMessage({
                                        id: 'updatePanel.text.no',
                                        defaultMessage: '否'
                                    })}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.trackCustomerOrNot',
                                    defaultMessage: '是否跟踪'
                                })}>{data.trackCustomerOrNot ? formatMessage({
                                        id: 'updatePanel.text.yes',
                                        defaultMessage: '是'
                                    }) : formatMessage({
                                        id: 'updatePanel.text.no',
                                        defaultMessage: '否'
                                    })}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.operation.estimatedTimeForDeal',
                                    defaultMessage: '预计成交时间'
                                })}>{formatDateTime(data.estimatedTimeForDeal, DATE_FORMAT)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.dealOrNot',
                                    defaultMessage: '是否成交'
                                })}>{data.dealOrNot ? formatMessage({
                                        id: 'updatePanel.text.yes',
                                        defaultMessage: '是'
                                    }) : formatMessage({
                                        id: 'updatePanel.text.no',
                                        defaultMessage: '否'
                                    })}</Description>
                            </DescriptionList>
                            <Divider/>
                            <DescriptionList size="large" title={<Row><Col span={12}>{formatMessage({
                                id: 'updatePanel.car.title',
                                defaultMessage: '车辆信息'
                            })}</Col>
                            </Row>}>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.productCode',
                                    defaultMessage: '产品编号'
                                })}>{data.productCode}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.productName',
                                    defaultMessage: '产品描述'
                                })}>{data.productName}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.modelCode',
                                    defaultMessage: '车型代码'
                                })}>{data.modelCode}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.modelName',
                                    defaultMessage: '车型名称'
                                })}>{data.modelName}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.VIN',
                                    defaultMessage: 'VIN'
                                })}>{data.vIN}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.saleConfirmationCode',
                                    defaultMessage: '销售确认书编号'
                                })}>{data.saleConfirmationCode}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.localLicensePlateNumber',
                                    defaultMessage: '当地上牌号码'
                                })}>{data.localLicensePlateNumber}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.useVehicleStickerOrNot',
                                    defaultMessage: '是否使用车贴'
                                })}>{data.useVehicleStickerOrNot ? formatMessage({
                                        id: 'updatePanel.text.yes',
                                        defaultMessage: '是'
                                    }) : formatMessage({
                                        id: 'updatePanel.text.no',
                                        defaultMessage: '否'
                                    })}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.keepTestDrivePhotoOrNot',
                                    defaultMessage: '是否提供试驾车照片'
                                })}>{data.keepTestDrivePhotoOrNot ? formatMessage({
                                        id: 'updatePanel.text.yes',
                                        defaultMessage: '是'
                                    }) : formatMessage({
                                        id: 'updatePanel.text.no',
                                        defaultMessage: '否'
                                    })}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.operation.putIntoUseTime',
                                    defaultMessage: '投入使用时间'
                                })}>{formatDateTime(data.putIntoUseTime, DATE_FORMAT)}</Description>
                            
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.fOBPercentImplementedOrNot',
                                    defaultMessage: 'FOB比例是否兑现'
                                })}>{data.fOBPercentImplementedOrNot ? formatMessage({
                                        id: 'updatePanel.text.yes',
                                        defaultMessage: '是'
                                    }) : formatMessage({
                                        id: 'updatePanel.text.no',
                                        defaultMessage: '否'
                                    })}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.operation.timeForImplementation',
                                    defaultMessage: '费用支持兑现时间'
                                })}>{formatDateTime(data.timeForImplementation, DATE_FORMAT)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.operation.timeOfUse',
                                    defaultMessage: '使用时间'
                                })}>{formatDateTime(data.timeOfUse, DATE_FORMAT)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.drivingMileage',
                                    defaultMessage: '借车里程表数'
                                })}>{data.drivingMileage}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.operation.timeOfReturn',
                                    defaultMessage: '归还时间'
                                })}>{formatDateTime(data.timeOfReturn, DATE_FORMAT)}</Description>
                             
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.returnStatus',
                                    defaultMessage: '归还状态'
                                })}>{conventEnumValueToString(ReturnStatus, data.returnStatus)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.mileageWhenReturn',
                                    defaultMessage: '还车里程表数'
                                })}>{data.mileageWhenReturn}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.remark',
                                    defaultMessage: '备注'
                                })}>{data.remark}</Description>
                            </DescriptionList>
                            <Divider/>
                            <DescriptionList size="large" title={<Row><Col span={12}>{formatMessage({
                                id: 'updatePanel.merit.title',
                                defaultMessage: '试乘试驾评估信息'
                            })}</Col>
                            </Row>}>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.occupationType',
                                    defaultMessage: '客户职业类型'
                                })}>{conventEnumValueToString(customerOccupationType, data.occupationType)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.drivingAge',
                                    defaultMessage: '驾龄'
                                })}>{data.drivingAge}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.salesConsultantName',
                                    defaultMessage: '销售顾问姓名'
                                })}>{data.salesConsultantName}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.evaluationDate',
                                    defaultMessage: '评估日期'
                                })}>{formatDateTime(data.evaluationDate, DATE_FORMAT)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.dynamicsPerformance',
                                    defaultMessage: '动力表现'
                                })}>{conventEnumValueToString(evaluateResult, data.dynamicsPerformance)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.maneuverability',
                                    defaultMessage: '操控性能'
                                })}>{conventEnumValueToString(evaluateResult, data.maneuverability)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.brakePerformance',
                                    defaultMessage: '制动性能'
                                })}>{conventEnumValueToString(evaluateResult, data.brakePerformance)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.drivingComfort',
                                    defaultMessage: '舒适性能'
                                })}>{conventEnumValueToString(evaluateResult, data.drivingComfort)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.interiorSpace',
                                    defaultMessage: '内部乘坐空间感受'
                                })}>{conventEnumValueToString(evaluateResult, data.interiorSpace)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.testDriveService',
                                    defaultMessage: '服务满意度'
                                })}>{conventEnumValueToString(evaluateResult, data.testDriveService)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.conditionAndCleanliness',
                                    defaultMessage: '车况和清洁程度'
                                })}>{conventEnumValueToString(evaluateResult, data.conditionAndCleanliness)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.routeLength',
                                    defaultMessage: '路线的长度'
                                })}>{conventEnumValueToString(evaluateResult, data.routeLength)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.driveRoute',
                                    defaultMessage: '路线设置'
                                })}>{conventEnumValueToString(evaluateResult, data.driveRoute)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.overallMerit',
                                    defaultMessage: '综合评价'
                                })}>{conventEnumValueToString(evaluateResult, data.overallMerit)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.testDriveMeaningfulToPurchasing',
                                    defaultMessage: '乘试驾对购车是否有作用'
                                })}>{data.testDriveMeaningfulToPurchasing ? formatMessage({
                                        id: 'updatePanel.text.yes',
                                        defaultMessage: '是'
                                    }) : formatMessage({
                                        id: 'updatePanel.text.no',
                                        defaultMessage: '否'
                                    })}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.testDriveStatus',
                                    defaultMessage: '试乘试驾信息状态'
                                })}>{conventEnumValueToString(testDriveStatus, data.testDriveStatus)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.operation.creatorName',
                                    defaultMessage: '创建人姓名'
                                })}>{data.creatorName}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.operation.createTime',
                                    defaultMessage: '创建时间'
                                })}>{formatDateTime(data.createTime, DATE_FORMAT)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.operation.modifierName',
                                    defaultMessage: '更新人姓名'
                                })}>{data.modifierName}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.operation.modifyTime',
                                    defaultMessage: '更新时间'
                                })}>{formatDateTime(data.modifyTime, DATE_FORMAT)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.operation.effectPersonName',
                                    defaultMessage: '生效人姓名'
                                })}>{data.effectPersonName}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.operation.effectTime',
                                    defaultMessage: '生效时间'
                                })}>{formatDateTime(data.effectTime, DATE_FORMAT)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.operation.abandonerName',
                                    defaultMessage: '作废人姓名'
                                })}>{data.abandonerName}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.operation.abandonTime',
                                    defaultMessage: '作废时间'
                                })}>{formatDateTime(data.abandonTime, DATE_FORMAT)}</Description>
                                <Description term={formatMessage({
                                    id: 'updatePanel.text.opinionsAndSuggestions',
                                    defaultMessage: '意见及建议'
                                })}>{data.opinionsAndSuggestions}</Description>
                            </DescriptionList>
                            <Divider/>
                            
                        </Card>
                        <Card title={formatMessage({
                            id: 'updatePanel.title.files',
                            defaultMessage: '附件清单'
                        })}>
                            <Row>
                                <Col {...FORM_OPTIONS.col}>
                                    <FileUpload onChange={this.onChangeUpload}
                                        onRemove={this.removeFilePath}
                                        fileList={data.attachments || EMPTY_ARRAY}/>
                                </Col>
                            </Row>
                        </Card>
                        {<Card type="inner">
                            <Row>
                                <Col disabled={!submitable} className="col-align-right">
                                    <Button key="submit" loading={this.state.loading}
                                        onClick={this.onSubmit} type="primary">{formatMessage({
                                            id: 'updatePanel.btn.submit',
                                            defaultMessage: '保存'
                                        })}</Button>
                                </Col>
                            </Row>
                        </Card>}
                    </Form>
                </Spin>
                <div className="page-toolbar">
                    <Return
                        onConfirm={this.onClickReturnBtn}
                        disabled={this.state.loading}
                        showWarning={this.state.hasOperat} />
                </div>
            </div>
        );
    }
}

UpdatePanel.propTypes = {
    onCancel: PropTypes.func.isRequired,
    onSubmit: PropTypes.func.isRequired,
    history: PropTypes.object,
    intl: PropTypes.object,
    pagePermission: PropTypes.array,
};
import {connect} from 'react-redux';
import {
    onSubmit,
    tableSearch,
} from './actions';
import {selectorFactory} from 'Shared/utils/immutableToJsSelectorFactory';
const getPagePermission = selectorFactory(['page', 'domainData', 'permissions', 'data']);

const mapStateToProps = state => ({
    pagePermission: getPagePermission(state),
});

const mapDispatchToProps = (dispatch, props) => {
    const ownProps = {
        onSubmit: data => dispatch(onSubmit(data)).then(result => {
            if(result.success) {
                dispatch(tableSearch());
                props.history.push(routes.query.url());
            }
        }),
        onCancel: () => props.history.push(routes.query.url())
    };
    return ownProps;
};

export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(UpdatePanel));
